<template>
  <div class="main">
    <!-- 路由占位符 -->
    <router-view></router-view>
    <!-- 底部导航栏 -->
    <van-tabbar route>
      <van-tabbar-item :icon="item.icon" v-for="(item,i) in  tabbarData" :key="i" replace :to="item.path">

        <span>{{item.title}}</span>
        <template #icon="props">
          <img :src="props.active ? item.activeImg : item.inactiveImg" />
        </template>

      </van-tabbar-item>

    </van-tabbar>

  </div>
</template>
<script>
export default {
  name: 'Main',

  data() {
    return {
      activeName: 'Home',
      tabbarData: [
        {
          title: '首页',
          icon: 'shop',
          //标签名称，页面跳转路由名称
          name: 'Home',
          path: '/main/home',
          // 未选中和选中的图标的路径
          inactiveImg: require('../assets/images/home.png'),
          activeImg: require('../assets/images/home_active.png')
        },
        {
          title: '菜单',
          icon: 'search',
          name: 'Menu',
          path: '/main/menu',
          inactiveImg: require('../assets/images/menu.png'),
          activeImg: require('../assets/images/menu_active.png')
        },
        {
          title: '购物袋',
          icon: 'friends-o',
          name: 'Shopbag',
          path: '/main/shopbag',
          inactiveImg: require('../assets/images/shopbag.png'),
          activeImg: require('../assets/images/shopbag_active.png')
        },
        {
          title: '我的',
          icon: 'setting-o',
          name: 'My',
          path: '/main/my',
          inactiveImg: require('../assets/images/my.png'),
          activeImg: require('../assets/images/my_active.png')
        }
      ]
    }
  },
  methods: {}
}
</script>
<style lang="less">
</style>
